<template>
  <div class="_box" id="graphuge">
    <div class="_left" >
      <div class="_cardBox">
        <span class="_num" style="color:#999;text-align:left;">
          当前总额：300,000,000
        </span>
        <span class="_date" style="color:#999;text-align:left;">
          截止时间：2019/10/19
        </span>
        <span class="_label">
          筹资进度
        </span>
        <span class="_txt">30 
          <span style="font-size:20px;line-height:0;position:absolute;bottom:17%;right:25%;">%</span></span>
        <div class="container">
          <div class="circle"></div>
          <div class="circle"></div>
          <div class="circle"></div>
          <div class="circle"></div>
        </div>
      </div>
    </div>
    <div class="_right _r1" id="chart_1"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      chardata_1:{},
    }
  },
  mounted(){
    this.allotData();
    console.log(this.chardata_1);
    this.SetEchart();
  },
  computed: {
    getGrapData(){
      return this.$store.getters.getGrapData
    }
  }, 
  methods: {
    SetEchart(){
        // 基于准备好的dom，初始化echarts实例
      let myChart_1 = this.$echarts.init(document.getElementById('chart_1'),'dark');
      // 绘制图表
      var  option_1 = {
        title:{
          text:'行业金融指数',
          textStyle:{
            fontSize:16,

          },
        },
        grid:{
          bottom:'15%',
          top:'25%',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            data:['环比','同比','增长率'],
            itemWidth:10,
            itemHeight:3,
            top:20,
        },
        xAxis: [
            {
                type: 'category',
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                axisPointer: {
                    type: 'shadow'
                },
                axisLabel:{
                  fontSize:10,
                },
                splitLine:{
                  show:false,
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value}',
                    fontSize:7,
                },
                splitLine:{
                  show:false,
                }
            },
            {
                type: 'value',
            
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value}%',
                    fontSize:7,
                },
                splitLine:{
                  show:false,
                }
            }
        ],
        series: [
        {
            name:'环比',
            type:'bar',
            data:this.chardata_1.ch1
        },
        {
            name:'同比',
            type:'bar',
            data:this.chardata_1.ch2
        },
        {
            name:'增长率',
            type:'line',
            yAxisIndex: 1,
            data:this.chardata_1.ch3
        }
        ],
        top:30,
      };
      myChart_1.setOption(option_1);
    },
    allotData(){
      var temp = this.getGrapData;
      //console.log(temp);
      this.chardata_1 = temp[0];
    }
  },
}
</script>


<style scoped>
  div,span{
    display: block;
  }
  span{
    text-align: center;
    display: block;
  }
  ._box{
    width: 100%;
    height: 100%;
    position: relative;
  }
  ._left{
    height: 100%;
    width:40%;
    position: relative;
    background:#000;
    float: left;
  }
  ._left ._cardBox{
    width:100%;
    height: 100%;
    background: #333;
    
  }
  ._right{
    height: 100%;
    width: 60%;
    position: relative;
    float: left;
  }
  ._left ._txt{
    position:absolute;
    height:50%;
    width:66%;
    top:25%;
    left:17%;
    color:#fc6;
    font-size: 4em;
    text-align: center;
    line-height: 175%;
    font-weight: 600;
  }
  ._left ._label{
    width: 100%;
    color:#fc6;
    font-size: 1.25em;
    position:absolute;
    bottom: 5%;
  }
    /*引用*/
    .container {
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 80%;
      height:100%;
    }
    .container .circle {
      position: absolute;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 50%;
      background: rgba(138, 43, 226, 0.02);
    }
    .container .circle:nth-of-type(1) {
      width: 80%;
      height: 58%;
      animation: rt 6s infinite linear;
      box-shadow: 0 0 1px 0 rgb(255, 137, 68), inset 0 0 10px 0 rgb(226, 43, 98);
    }
    .container .circle:nth-of-type(2) {
      width: 90%;
      height: 50%;
      animation: rt 10s infinite linear;
      box-shadow: 0 0 1px 0 rgb(211, 0, 0), inset 0 0 10px 0 rgb(211, 60, 0);
    }
    .container .circle:nth-of-type(3) {
      width: 84%;
      height: 45%;
      animation: rt 5s infinite linear;
      box-shadow: 0 0 1px 0 rgb(139, 0, 46), inset 0 0 10px 0 rgb(139, 0, 139);
    }
    .container .circle:nth-of-type(4) {
      width: 92%;
      height: 52%;
      animation: rt 15s infinite linear;
      box-shadow: 0 0 1px 0 rgb(255, 238, 0), inset 0 0 10px 0 rgb(255, 0, 43);
    }

    @keyframes rt {
      100% {
        transform: rotate(360deg);
      }
    }
</style>
